<template>
  <!-- <div> -->
    <!-- 编辑器预览组件 -->
    <el-drawer :visible.sync="dialogVisible" v-if="dialogVisible" :show-close="false" width="500px" @close="close">
      <div style="text-align: right;">
        <i class="el-icon-close" style="color: #fff;font-size: 24px;margin-right: 20px;margin-bottom: 10px;"
          @click="close"></i>
      </div>
      <div class="drawer-wrap">
        <div class="header">
          <img class="search" src="@/assets/icons/search.png" alt="">
          <el-input v-model="kerWord" placeholder="搜索" clearable @keyup.enter.native="handleQuery" @clear="onClearSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleQuery"></el-button>
          </el-input>
        </div>
        <!-- 预览组件 -->
        <Preview ref="preview1" />
        <!-- 列表 -->
        <el-tabs v-model="activeName" @tab-click="changeTab">
          <el-tab-pane v-for="(item, index) in tabIndexList" :key="index" :label="item.name"
            :name="item.value"></el-tab-pane>
        </el-tabs>
          <div class="material-list" v-infinite-scroll="loadMore" infinite-scroll-immediate="false"
            infinite-scroll-disabled="disabledLoading" :infinite-scroll-distance="50">
            <div class="material-item" v-for="(item, index) in retrieveList" :key="index">
              <div class="material-item-content">
                <div class="material-title">{{ item.title }}</div>
                <!-- 视频 -->
                <div class="material-video">
                  <img :src="item.content" alt="">
                </div>
                <!-- <div class="material-tag">
                  <span class="tag" v-for="(cell, index) in item.labels" :key="index">{{ cell }}</span>
                </div> -->
                <!-- <div class="material-time">上传时间：{{ parseTime(new Date(item.publishDatetime), '{y}-{m}-{d}') }}</div> -->
                <div class="material-btn">
                  <el-button size="mini" @click="handlePreview(item)" plain>预览</el-button>
                  <el-button type="primary" size="mini" class="primary-btn" @click.stop.prevent="handleInsertion(item)">插入</el-button>
                </div>
              </div>
            </div>
            <div style="width: 100%;height: 50px;text-align: center;">
              <div v-if="loading">加载中...</div>
              <div v-if="noMore">没有更多了</div>
            </div>
          </div>
        </div>


    </el-drawer>
  <!-- </div> -->
</template>

<script>
import { queryImageOrText } from "@/api/material/material";
import Preview from "./Preview";

export default {
  name: "ImgMaterial",
  components: {
    Preview
  },
  data() {
    return {
      title: "",
      dialogVisible: false,
      retrieveList: [],
      activeName: 'private',
      kerWord: '',
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      tabIndexList: [
        {
          name: '• 个人',
          value: 'private',
        },
        {
          name: '• 公共',
          value: 'public',
        },
      ],
      noMore: false,
      taskId: null
    };
  },
  computed: {
    disabledLoading() {
      return this.loading || this.noMore
    },
    userId() {
      return this.$store.getters.userId;
    },
  },
  mounted() { },
  methods: {
    close() {
      this.dialogVisible = false;
    },
    show(id) {
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.kerWord = ''
        this.taskId = id
        this.getImageList()
      })

    },
    // 获取视频素材
    getImageList() {
      this.loading = true;
      const params = {
        ...this.queryParams,
        queryType: 'IMAGE',
        taskId: this.taskId,
        queryContent: this.kerWord || '',
      }
      if (this.activeName === 'private') {
        params.user = this.userId
      }
      queryImageOrText(params).then(response => {
        if (this.queryParams.pageNum === 1) {
          this.total = response.total; // 保存总页数
          this.retrieveList = []
        }
        const newData = response.rows || []
        this.retrieveList = [...this.retrieveList, ...newData]; // 将新数据添加到原有数据列表中
        this.loading = false;
        if (this.retrieveList.length >= this.total) {
          console.log('没有更多数据')
          this.noMore = true;
        } else {
          this.noMore = false;
        }

      }).finally(() => {
        this.loading = false;
      });
    },
    // 切换个人公共
    changeTab(tabIndex) {
      this.queryParams.pageNum = 1
      this.retrieveList = []
      this.tabIndex = tabIndex
      if (tabIndex.name === 'private') {
        this.queryParams.userId = this.userId
      } else {
        this.queryParams.userId = ''
      }
      this.getImageList()
    },
    // 预览
    handlePreview(detail) {
      detail.preViewUrl = detail.content;
      console.log(detail, '-------------')
      this.$refs.preview1.show(detail)
    },
    // 插入
    handleInsertion(item) {
      item.preViewUrl = item.content;
      this.$emit('insertion', item)
      this.close()
    },
    // 加载更多
    loadMore() {
      console.log(this.queryParams.pageNum, '-----------------')
      this.queryParams.pageNum += 1
      this.getImageList()
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.retrieveList = []
      this.getImageList();
    },
    /**
     * 清空搜索
     */
     onClearSearch() {
      this.queryParams.pageNum = 1;
      this.retrieveList = []
      this.getImageList();
    },
  },
};
</script>
<style scoped lang="scss">
.app-container {
  position: relative;
}

.drawer-wrap {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  background: #F7F8FA;
  border-radius: 4px;

  .search {
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }

  .line {
    display: inline-block;
    width: 2px;
    height: 13px;
    background-color: #2552E4;
    margin-right: 5px;
  }

  i {
    font-size: 26px;
    cursor: pointer;
    margin-left: 60px;
  }
}

.material-list {
  height: 550px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .material-item {
    margin-bottom: 12px;
    width: 48.8%;

    .material-item-content {
      background: #F7F8FA;
      padding: 10px;
      border-radius: 4px;
    }

    .material-title {
      height: 40px;
      font-size: 14px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      /*这里是超出几行省略*/
      overflow: hidden;
    }

    .material-video {
      img {
        width: 100%;
        height: 140px;
      }

      video {
        width: 100%;
        height: 140px;
      }
    }

    .material-desc {
      font-size: 12px;
      color: rgba(255, 255, 255, .8);
      line-height: 20px;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      /*这里是超出几行省略*/
      overflow: hidden;
    }

    .material-tag {
      margin: 10px 0 10px;

      .tag {
        display: inline-block;
        background: rgba(9, 184, 68, 0.08);
        color: #09B844;
        padding: 3px 10px;
        font-size: 12px;
        border-radius: 2px;
        margin-right: 10px;
      }

      .tag:last-child {
        background: rgba(0, 87, 255, 0.08);
        color: #0057FF;
      }
    }

    .material-time {
      font-size: 12px;
    }

    .material-btn {
      display: flex;
      margin-top: 15px;

      .btn {
        border: none;
        background: transparent;
      }

      .btn:hover {
        background: none;
      }

      .primary-btn {
        padding: 7px 30px;
      }
    }
  }
}

::v-deep {
  .el-dialog__header {
    padding: 0;
  }

  .el-drawer {
    background: transparent;
  }

  .el-input__inner {
    background: transparent !important;
    border: none;
  }
  .el-input-group__append {
    border: none;
  }

  .el-tabs__nav-wrap::after {
    background: transparent;
  }
}
</style>
